<template>
	<view style="padding-top: 5%;padding-bottom: 5%;height: 100%;background-color: rgb(243,244,246);">
		<u-card v-for="(item,index) in item" :title="item.user.wxName" @click="orderDeatil(item.id)" :sub-title="item.mealTime +' '+ item.mealType"
		 :thumb="item.user.picture" thumb-width="60" :key="index" thumb-circle>
			<view slot="body">
				<view style="display: flex;">
					<view style="flex: 1;">
						<u-lazy-load border-radius="20" :image="imgUrl + item.foods[0].picture" style="height: 170rpx"></u-lazy-load>
						<view style="text-align: center;">{{item.foods[0].name}}</view>
					</view>
					<view style="flex: 1;margin-left: 5rpx;" v-if="item.foods.length > 1">
						<u-lazy-load border-radius="20" :image="imgUrl + item.foods[1].picture"></u-lazy-load>
						<view style="text-align: center;">{{item.foods[1].name}}</view>
					</view>
					<view style="flex: 2;display: flex;margin-left: 5rpx;">
						<view style="margin: auto 0;flex: 1;">
							<view style="text-align: right;">{{item.num}}人就餐 共{{item.sum}}道菜</view>
							<view style="text-align: right;">{{item.place.place}} {{item.flavor.flavor}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: right;" slot="foot">
				<u-tag text="准备中..." type="success" v-if="item.status == 0 " />
				<u-tag text="就餐中..." type="primary" v-if="item.status == 1 " />
				<u-tag text="已完成" type="info" v-if="item.status == 2 " />
			</view>
		</u-card>

	</view>
</template>

<script>
	import {
		queryOrderAll
	} from '@/api/common.js'

	export default {
		data() {
			return {
				imgUrl: '',
				total: 0,
				pages: 0,
				pageNum: 1,
				limit: 5,
				item: []
			}
		},
		created(e) {
			this.imgUrl = getApp().globalData.baseImgurl
			this.query(this.pageNum,this.limit)
		},
		onReachBottom() {
			let that = this
			queryOrderAll(this.pageNum + 1, this.limit).then(res => {
				console.log(res)
				that.limit = res.data.limit
				that.pages = res.data.pages
				that.pageNum = res.data.pageNum
				that.total = res.data.total
				that.item = that.item.concat(res.data.items)
			
			}).catch(res => {
				console.log(res)
			})
		},
		onShow() {
			this.query( 1 , 5)
		},
		methods: {
			foodsSum(e){
				
				let total = 0;
				
				e.forEach(item=>{
					total += item.num
				})
				return total
			},
			query(pageNum, limit) {
				let that = this
				queryOrderAll(pageNum, limit).then(res => {
					console.log(res)
					that.limit = res.data.limit
					that.pages = res.data.pages
					that.pageNum = res.data.pageNum
					that.total = res.data.total
					that.item = res.data.items
				}).catch(res => {
					console.log(res)
				})
			},
			orderDeatil(id) {
				uni.navigateTo({
					url: `../order/orderDetail?id=${id}`
				})
			}
		},
	}
</script>

<style>
	.card-left {
		width: 33.33%;
	}

	.card-right {
		margin-left: 3%;
		width: 63.66%;
	}

	.card {
		display: flex;
		padding: 5%;

	}

	.description {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
